<template>
  <div class="card" style="width: 20rem;">
    <img class="card-img-top" :src="img_src" :alt="img_alt">
    <div class="card-body">
      <h4 class="card-title">{{title}}</h4>
      <p class="card-text" v-html="text"></p>
      <a :href="a_href" class="btn btn-primary" @click="$emit('on-a-click')">{{a_label}}</a>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      img_src: {
        type: String,
        default: require('../assets/logo.png')
      },
      img_alt: {
        type: String,
        default: 'test'
      },
      title: {
        type: String,
        default: 'test'
      },
      text: {
        type: String,
        default: 'test'
      },
      a_href: {
        type: String,
        default: '#'
      },
      a_label: {
        type: String,
        default: 'test'
      }
    }
  }
</script>

<style scoped>
  @import '~bootstrap/dist/css/bootstrap.css';
</style>
